<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>round</title>
  <style type="text/css">
      *{
        margin: 0;
        padding: 0;

      }
      .round {
        border: 1px solid rgba(255, 255, 255, 0.6);
        margin: 50px auto;
        /*background: blue;*/
    }
    .w300 {
        height: 298px;
        width: 298px;
        border-radius: 298px;
        margin-top: 0;
        /*overflow: hidden;*/
       
    }
    .w200 {
        border-radius: 200px;
        height: 200px;
        width: 200px;
    }
    .w100 {
        border-radius: 100px;
        height: 100px;
        width: 100px;
    }
    .w1 {
        width: 1px;
        background-color: #fff;
        border-radius: 1px;
        height: 1px;
        position: relative;
        top: -4px;
    }
    .line {
        background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) repeat scroll 0 0;
        border-left: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 0 0 150px;
        height: 150px;
        left: 0;
        position: absolute;
        top: 0;
    
        transform-origin: 0 0 ;
        width: 150px;
    }
    .roundMove {
        animation: round 3s linear infinite;
    }


    @keyframes round {
    0%{
         transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }
  </style>
</head>
<body style="background:black none repeat scroll 0% 0%; margin: 100px auto;">
  <div class="round w300">
        <div class="round w200">
            <div class="round w100">
                <div class="round w1">
                    <div class="line roundMove"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>